import PropTypes from 'prop-types';
import PureRenderMixin from "react-addons-pure-render-mixin"
import React, {Component} from 'react';
import D3Chart from '../D3Chart'
import d3 from './d3';
import './bar.scss';
import T from 'utils/T';


@T.decorator.propTypes({
    data: PropTypes.array,
    option: PropTypes.object
})
export default class Demo extends D3Chart {
    getOptions(){
        return Object.assign({
            width: 100,
            height: 50,
            left:30,
            right:30,
            top:20,
            bottom:30,
            rectPadding: 4
        }, this.props.options)
    }

    /**
     * 标准化数据格式
     */
    normalize() {
        const dataInit = this.props.data;
        this.xData = [];
        this.yData = [];
        this.data = dataInit.map(item => {
            this.xData.push(item.x);
            this.yData.push(item.value);
            return item;
        });
    }

    drawChart(){

        const options = this.getOptions();
        //在 wrapper 里添加一个 SVG 画布
        this.chart = d3.select(this.wrapper)     //选择文档中的wrapper元素
            .append('svg')          //添加一个svg元素
            .attr('width', '100%')       //设定宽度
            .attr('height', options.height)    //设定高度
            .style('border', '1px solid #ccc');
        //画布周边的空白
        let padding = {left:options.left, right:options.right, top:options.top, bottom:options.bottom};


        let circle = this.chart.append('rect')
            .attr('x', 0)
            .attr('y', 0)
            .attr('width', 100)
            .attr('height', 40)
            .attr('fill', 'red')
        circle.on('click', function () {
            // console.log(d3.event);
            console.log(d3.select(this).attr('fill'));
        }).on('mousemove', function () {
            // console.log(2);
        }).on('keydown', function () {
            // console.log(3);
        })




    }
}
